<template>
  <div class="w-full h-full bg-[#F2F4F5]" style="font-size: 16px">
    <div class="max-w-[1440px] pt-[30px] px-[30px] bg-white" style="margin: 0 auto">
      <div class="w-full flex flex-col justify-center items-center">
        <div class="font-bold" style="font-size: 20px">{{ Info.data.name }}</div>
        <div class="mt-[15px] mb-[30px]" style="font-size: 14px">
          由{{ Info.data.brand }}承保
        </div>
      </div>
      <div>
        <el-form
          :model="formData"
          ref="formRef"
          :rules="rules"
          label-width="7vw"
          :inline="false"
          label-position="left"
        >
          <el-form-item label="保险期间" prop="name">
            <div class="flex items-center" style="font-size: 14px">
              <div>自</div>
              <div
                class="w-[130px] h-[30px] border border-[#BEBEBE] rounded-[4px] ml-[10px] flex items-center justify-center"
              >
                <el-date-picker
                  :clearable="false"
                  :disabled="disabled"
                  :disabled-date="disabledDate1"
                  v-model="param.start_time"
                  type="date"
                  value-format="x"
                  @change="pickerChange($event, 1)"
                />
              </div>
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              ：
              <div
                class="w-[40px] h-[30px] bg-[#FBFBFB] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                00
              </div>
              <div class="ml-[10px]">起</div>
              <div class="ml-[15px]">至</div>
              <div
                class="w-[130px] h-[30px] border border-[#BEBEBE] rounded-[4px] ml-[10px] flex items-center justify-center"
              >
                <el-date-picker
                  v-model="param.end_time"
                  type="date"
                  :disabled="true"
                  value-format="x"
                  @change="pickerChange($event, 3)"
                />
              </div>
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                23
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                59
              </div>
              ：
              <div
                class="w-[40px] bg-[#FBFBFB] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[4px] ml-[5px]"
              >
                59
              </div>
              <div class="ml-[10px]">止</div>
              <div class="ml-[10px]">至</div>
              <el-select
                v-model="daysText"
                class="m-2"
                :disabled="disabled"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option
                  @click="clickOptions(key)"
                  v-for="(item, key) in daysSelect"
                  :key="key"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
              <!-- <div
                class="mx-[10px] w-[50px] h-[30px] border border-[#BEBEBE] rounded-[4px] flex justify-center items-center"
              >
                {{ days < 0 ? 0 : days }}
              </div> -->
            </div>
          </el-form-item>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <!-- 
  投保人信息（主被保人） -->
          <baoItem1
            :cardType="Info.data.cardType"
            :insure="param.insure"
            :cardTypeTwo="Info.data.cardTypeTwo"
            :addInfo="param"
            :disabled="disabled"
            ref="baoItem1Ref"
          ></baoItem1>
          <div class="w-full border-b border-[#ECECEC] mt-[15px]"></div>

          <!-- 附近被保人 -->
          <baoItem2
            ref="baoItem2Ref"
            :disabled="disabled"
            :cardTypeOne="Info.data.cardTypeOne"
            :cardTypeTwo="Info.data.cardTypeTwo"
            :nature="Info.data.nature"
            :insured="param.insured"
            :param="param"
            @getChildrenData="getChildrenData"
            @pickerChange="pickerChange"
          ></baoItem2>
          <div class="w-full border-b border-[#ECECEC] mt-[15px]"></div>

          <!-- 标的要素 -->
          <elementItem
            @handleProvinceSelect="handleProvinceSelect"
            @getAddress="getAddress"
            :disabled="disabled"
            @handleCitySelect="handleCitySelect"
            @handleAreaSelect="handleAreaSelect"
            :treetop="param.treetop"
            :fananList="Info.data.fanan"
            @pickerChange="pickerChange"
            @inputChange="inputChange"
            ref="elementItemRef"
          >
          </elementItem>
          <!-- 发票 -->
          <!-- <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <fp :form="param.invoice" :disabled="disabled"></fp> -->
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>
          <!-- 职业类别 -->
          <!-- <div>
            <category
              :disabled="disabled"
              ref="categoryRef"
              :type="Info.data.categoryType"
              :job_code="param.job_code"
            ></category>
          </div> -->
          <!-- 施工地址 -->
          <!-- <div>
            <addressVue
              ref="addressVueRef"
              :addInfo="param"
              :disabled="disabled"
            ></addressVue>
          </div> -->
          <!-- 保险责任 -->
          <responsibility
            @change="change"
            @optionClick="optionClick"
            :start_time="param.start_time"
            :end_time="param.end_time"
            :duty="Info.data.duty"
            :param="param"
            :disabled="disabled"
            :fananCost="fananCost"
            :personCost="personCost"
            ref="responsibilityRef"
          ></responsibility>
          <div class="w-full border-b border-[#ECECEC] mt-[30px]"></div>

          <!-- 被保人清单 -->
          <!-- <detailedList
            ref="detailedListRef"
            :user="param.user"
            :disabled="disabled"
            :userCardType="Info.data.userCardType"
          ></detailedList> -->
          <!-- 驳回理由 -->
          <div>
            <reason :Info="param" :disabled="disabled"></reason>
          </div>
          <div
            class="w-full h-[110px] flex items-center px-[35px] mt-[60px] justify-between"
            style="box-shadow: 0px -3px 8px 0px rgba(143, 143, 143, 0.05)"
          >
            <div>
              <span>保费：</span>
              <span class="text-[#EF6800]">￥</span>
              <span class="text-[#EF6800]" style="font-size: 30px">{{
                cost.toFixed(2)
              }}</span>
              <span>元</span>
            </div>
            <div v-if="order_id && param.state == '1'" class="flex items-center">
              <div
                v-if="param.state == '1'"
                @click="Edit"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                修改
              </div>
              <div
                @click="openBjsDia"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] bg-[#EF6800] cursor-pointer ml-[20px]"
              >
                报价书
              </div>
              <!-- <div
                v-if="
                  disabled && param.state == '1' && !param.apply_no && param.is_pay == 1
                "
                @click="Pay(1)"
                class="w-[100px] h-[35px] flex justify-center items-center ml-[20px] text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                见费出单
              </div>
              <div
                v-if="
                  disabled && param.state == '1' && !param.apply_no && param.is_pay == 1
                "
                @click="Pay(0)"
                class="w-[100px] h-[35px] flex justify-center items-center ml-[20px] text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                非见费出单
              </div> -->
              <div
                v-if="disabled && param.state == '1'"
                @click="DDpay(1)"
                class="w-[100px] h-[35px] flex justify-center items-center ml-[20px] text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                大地支付
              </div>
              <div
                @click="DDpay(2)"
                v-if="disabled && param.state == '1'"
                class="w-[100px] h-[35px] flex justify-center items-center ml-[20px] text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                广福支付
              </div>
              <div
                @click="DDpay(3)"
                v-if="disabled && param.state == '1'"
                class="w-[100px] h-[35px] flex justify-center items-center ml-[20px] text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                线下转账
              </div>
              <div
                v-if="!disabled && param.state == '1'"
                @click="sublit(formRef, '0')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                提交核保
              </div>
            </div>
            <div class="flex items-center" v-if="!order_id || param.is_copy == '1'">
              <div
                @click="openBjsDia"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] bg-[#EF6800] cursor-pointer"
              >
                报价书
              </div>
              <div
                @click="sublit(formRef, '1')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                暂存订单
              </div>
              <div
                @click="sublit(formRef, '0')"
                class="w-[100px] h-[35px] flex justify-center items-center text-white rounded-[4px] ml-[20px] bg-[#EF6800] cursor-pointer"
              >
                提交核保
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
  <div>
    <!-- 投保须知弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div
          class="w-full h-[50px] relative flex justify-center items-center bg-[#F5F5F5]"
        >
          <div style="font-size: 16px">投保须知</div>
          <div
            @click="router.push('/index/home')"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="p-[30px]" v-html="Info.data.notice ? Info.data.notice : ''"></div>

      <div class="w-full pb-[30px] flex flex-col items-center">
        <div class="w-full flex items-center justify-center">
          <div
            @click="checkedShow = !checkedShow"
            class="flex items-center justify-center"
            :style="
              dialogTime > 0
                ? 'cursor: default;pointer-events: none;'
                : 'cursor: pointer;pointer-events: auto;'
            "
          >
            <el-image
              v-if="checkedShow"
              :src="getAssetsFile('home/active.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
            <el-image
              v-else
              :src="getAssetsFile('home/noactive.png')"
              class="w-[18px] h-[18px]"
            ></el-image>
          </div>
          <span class="ml-[10px]" style="font-size: 16px"
            >已阅读并已详尽知晓上述内容
          </span>
          <span v-if="dialogTime">（{{ dialogTime }}s）</span>
        </div>
        <div class="mt-[30px]">
          <el-button
            @click="closeXzDialog"
            color="#EF6800"
            :dark="true"
            class="w-[240px]"
            size="large"
            :disabled="dialogTime ? true : false"
            ><span class="text-white">我已全部阅读</span></el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
  <div>
    <!-- 报价书 -->
    <el-dialog
      v-model="dialogBjsShow"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex justify-center items-center bg-white">
          <div style="font-size: 16px">报价书</div>
          <div
            @click="dialogBjsShow = false"
            class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
          >
            <el-image
              :src="getAssetsFile('home/close.png')"
              class="w-full h-full"
            ></el-image>
          </div>
        </div>
      </template>
      <div class="p-[20px] bg-[#F5F5F5]" id="save" style="font-size: 16px">
        <div class="w-full bg-white rounded-[10px] py-[30px]">
          <div class="w-full text-center font-bold mb-[20px]" style="font-size: 20px">
            {{ param.insure.name }}
          </div>
          <div class="w-full items-center justify-around flex">
            <div class="flex justify-center items-center flex-col">
              <div class="text-[#535353]">产品名称</div>
              <div class="mt-[20px] text-[#EF6800] font-bold" style="font-size: 20px">
                {{ Info.data.name }}
              </div>
            </div>
            <div class="flex justify-center items-center flex-col">
              <div class="text-[#535353]">保费</div>
              <div class="mt-[20px] text-[#EF6800] font-bold" style="font-size: 20px">
                ￥{{ cost.toFixed(2) }}
              </div>
            </div>
            <div class="flex justify-center items-center flex-col">
              <div class="text-[#535353]">保险期限</div>
              <div class="mt-[20px] text-[#EF6800] font-bold" style="font-size: 20px">
                {{ daysText }}
              </div>
            </div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="mb-[20px]">保险期限</div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>开始时间</div>
            <div>{{ start_date }}</div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>结束时间</div>
            <div>{{ end_date }}</div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="mb-[20px]">标的要素</div>
          <!-- <div class="mt-[20px] mb-[20px] bg-[#EF6800] w-full h-[1px]"></div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>投保年龄</div>
            <div>16周岁-65周岁</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>项目名称</div>
            <div>{{ param.treetop.name }}</div>
          </div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>项目造价</div>
            <div>{{ param.treetop.price }}</div>
          </div> -->
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>工程详细地址</div>
            <div class="flex">
              <div class="mr-[10px]">{{ param.treetop.address }}</div>
              <div>{{ param.treetop.room_no }}</div>
            </div>
          </div>
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>项目名称</div>
            <div>{{ param.treetop.name }}</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>施工详细地址</div>
            <div>{{ param.treetop.address }}</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>商铺号/房间号</div>
            <div>{{ param.treetop.room_no }}</div>
          </div> -->
          <!-- <div
            class="flex justify-between items-center w-full text-[#535353] mb-[20px]"
          >
            <div>保障方案</div>
            <div>{{ param.treetop.fanan }}</div>
          </div> -->
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <div class="">保险责任</div>
          <!-- <div class="mt-[20px] mb-[20px] bg-[#EF6800] w-full h-[1px]"></div> -->
          <div
            v-for="item in param.duty"
            class="flex justify-between items-center w-full text-[#535353] mt-[20px]"
          >
            <div v-if="item.money">{{ item.title }}</div>
            <div v-if="item.money">{{ item.money }}{{ item.unit }}</div>
          </div>
        </div>
        <div class="w-full bg-white rounded-[10px] py-[30px] px-[20px] mt-[10px]">
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>加费</div>
            <div>{{ param.add_price }}</div>
          </div> -->
          <!-- <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>个人保费</div>
            <div>
              {{ personCost.toFixed(2) }}
            </div>
          </div>
          <div class="flex justify-between items-center w-full text-[#535353] mb-[20px]">
            <div>被保人数</div>
            <div v-if="param.user">
              {{ param.user.length }}
            </div>
            <div v-else>
              {{ 1 }}
            </div>
          </div> -->
          <div class="flex justify-between items-center w-full text-[#535353]">
            <div>总保费</div>
            <div>{{ cost.toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <div class="w-full h-[78px] flex justify-center items-center">
        <div
          @click="dialogBjsShow = false"
          class="w-[86px] h-[30px] flex justify-center items-center bg-[#DDDDDD] rounded-[4px] text-white cursor-pointer"
        >
          关闭
        </div>
        <div
          @click="saveImage"
          class="w-[86px] h-[30px] flex justify-center items-center bg-[#EF6800] rounded-[4px] text-white ml-[70px] cursor-pointer"
        >
          保存
        </div>
      </div>
    </el-dialog>
  </div>
  <div>
    <!-- 去支付弹窗 -->
    <el-dialog
      v-model="payShow"
      v-if="payShow"
      width="400px"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #default>
        <!-- <div id="qrcode"></div> -->

        <div class="flex justify-center items-center py-[30px]" style="font-size: 18px">
          支付
        </div>
        <div class="flex justify-center items-center px-[30px] flex-col pb-[30px]">
          <Qrcode :size="150" :value="url"></Qrcode>
          <div class="flex justify-between mt-[30px]">
            <el-button @click="payShow = false">取消</el-button>
            <el-button type="success" @click="result">已支付</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 大地线下支付 -->
  <div>
    <ddxxPay :ddxxPayInfo="ddxxPayInfo"></ddxxPay>
  </div>
</template>
<script setup lang="ts">
import ddxxPay from "@/components/pay/ddxxPay.vue";
import type { FormRules, FormInstance } from "element-plus";
import Qrcode from "@/components/qrcode/qrcode.vue";
import html2canvas from "html2canvas";
import getAssetsFile from "@/utils/getImageurl.ts";
import { regionData } from "element-china-area-data";
import addressVue from "./address.vue";
import {
  reactive,
  computed,
  ComputedRef,
  ref,
  watchEffect,
  inject,
  onMounted,
} from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import responsibility from "./responsibility.vue";
import category from "./category.vue";
import upload from "./upload.vue";
import baoItem2 from "./baoItem2.vue";
import baoItem1 from "./baoItem1.vue";
import elementItem from "./element.vue";
import detailedList from "./detailedList.vue";
import {
  getInsureInfo,
  addOrder,
  orderDetail,
  getJobClassify,
  submitApi,
  getEndTime,
  gfpay,
} from "@/utils/api";
import * as rrweb from "rrweb";
import fp from "@/components/dd_fp/fp.vue";
import { listenerHandler } from "_@rrweb_types@2.0.0-alpha.16@@rrweb/types";
import reason from "@/components/reason/reason.vue";
const route = useRoute();
const router = useRouter();
const ddxxPayInfo = reactive({
  dialogShow: false,
  price: "",
  id: "",
});
const formData = reactive({
  name: "11",
  startTime: 0,
  endTimer: 0,
});
const payShow = ref(false);
const url = ref("");
const Rate = ref<number>(0); //费率
const numRate = ref<number>(0); //面积费率
const cost = ref<number>(0); //保费
const fananCost = ref<number>(0); //方案保费
const personCost = ref<number>(0); //个人保费
const price = ref(0); //保险责任总保费
const message = inject<any>("message");
const fananIndex = ref(0);
const disabled = ref(true);
const startTime = ref("");
const dialogVisible = ref(false);
const Info = reactive({ data: {} as infoType });
const costArr = ref({
  "50万": {
    100: {
      装修10: {
        "7天": {
          price: 338,
        },
      },
      拆旧10: {
        "7天": {
          price: 438,
        },
      },
      "30": {
        "3个月": {
          price: 900,
        },
        "6个月": {
          price: 1080,
        },
      },
      "100": {
        "3个月": {
          price: 1800,
        },
        "6个月": {
          price: 2160,
        },
      },
    },
    500: {
      装修10: {
        "7天": {
          price: 615,
        },
      },
      拆旧10: {
        "7天": {
          price: 788,
        },
      },
      "30": {
        "3个月": {
          price: 1600,
        },
        "6个月": {
          price: 1920,
        },
      },
      "100": {
        "3个月": {
          price: 2600,
        },
        "6个月": {
          price: 3120,
        },
      },
    },
  },
  "100万": {
    100: {
      装修10: {
        "7天": {
          price: 675,
        },
      },
      拆旧10: {
        "7天": {
          price: 875,
        },
      },
      "30": {
        "3个月": {
          price: 1620,
        },
        "6个月": {
          price: 2025,
        },
      },
      "100": {
        "3个月": {
          price: 3240,
        },
        "6个月": {
          price: 4050,
        },
      },
    },
    500: {
      装修10: {
        "7天": {
          price: 1225,
        },
      },
      拆旧10: {
        "7天": {
          price: 1575,
        },
      },
      "30": {
        "3个月": {
          price: 2880,
        },
        "6个月": {
          price: 3600,
        },
      },
      "100": {
        "3个月": {
          price: 4680,
        },
        "6个月": {
          price: 5850,
        },
      },
    },
  },
}) as any;
const order_id = computed({
  get: () => {
    return route.query.order_id;
  },
  set: () => {},
});

onMounted(() => {});
const dialogHtml = ref(""); //投保须知富文本
const checkedShow = ref(false); //是否勾选阅读
const dialogBjsShow = ref(false); //报价书弹窗\
const detailedListRef = ref<InstanceType<typeof detailedList>>();
const uploadRef = ref<InstanceType<typeof upload>>();
const responsibilityRef = ref<InstanceType<typeof responsibility>>();
const addressVueRef = ref<InstanceType<typeof addressVue>>();
const elementItemRef = ref<InstanceType<typeof elementItem>>();
const baoItem2Ref = ref<InstanceType<typeof baoItem2>>();
const baoItem1Ref = ref<InstanceType<typeof baoItem1>>();
const categoryRef = ref<InstanceType<typeof category>>();
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "Please input Activity name", trigger: "blur" }],
});
const daysSelect = ref([
  {
    label: "7天",
    value: "200",
  },
  {
    label: "3个月",
    value: "250",
  },
  {
    label: "6个月",
    value: "375",
  },
]);
const runDays = ref(0);
const daysIndex = ref(-1); //选择天数的下标
const days = ref<number>(0);
const dialogTime = ref(5); //弹框的倒计时
const param = reactive({
  id: 0,
  bx_id: 0, //保险id
  start_time: 0, //开始时间
  end_time: 0, //结束时间
  insure: {
    name: "", //投保人名称
    card_type: "", //投保人证件类型
    card_no: "", //投保人证件号
    contact: "", //投保人联系人
    contact_mobile: "", //投保人联系人手机号
    mailbox: "", //邮箱
    insure_type: "", //传单位和个人文字
    address: "",
  },
  insured: [],
  treetop: {
    name: "",
    price: "",
    start_date: "",
    end_date: "",
    area_num: "",
    province: "",
    city: "",
    area: "",
    province_code: "",
    city_code: "",
    area_code: "",
    address: "",
    room_no: "",
  },
  duty: [] as any[],
  annex: [],
  user: [],
  card_type: "",
  job_code: "",
  address: "",
  province: "",
  state: "", //1是未支付 2是已支付
  province_code: "",
  city: "",
  city_code: "",
  area: "",
  area_code: "",
  add_price: "",
  is_show: "",
  is_copy: "",
  total_price: "",
  mark: [],
  invoice: {
    invoice_type: "",
    invoice_name: "",
    invoice_no: "",
    invoice_mobile: "",
    invoice_bank: "",
    invoice_bank_no: "",
    invoice_address: "",
    name: "",
    mobile: "",
    address: "",
    invoice_email: "",
  },
  apply_no: "",
  bd_no: "",
  pc_pay_url: "",
  is_pay: "",
  memo: "",
}) as any;
const start_date = ref("");
const end_date = ref("");
const zjCost = ref(0);
const daysText = ref("");
watchEffect(() => {
  // if (param) {
  //   //订单详情
  //   days.value = Math.floor(
  //     (param.end_time - param.start_time) / (1000 * 3600 * 24) + 1
  //   );
  //   // days.value = Math.floor(
  //   //   (param.end_time - param.start_time) / (1000 * 3600 * 24)
  //   // );
  // }
  // if (param.user.length > 0) {
  //   cost.value = fananCost.value * param.user.length + Number(param.add_price);
  //   // console.log(param.user.length, fananCost.value);
  // }
});
let stopFun: listenerHandler | undefined;
onBeforeRouteLeave(() => {
  if (stopFun) {
    stopFun();
  }
  param.mark = [];
});
//开始录制
const player = () => {
  let stop = rrweb.record({
    emit(event: any) {
      param.mark.push(event);
    },
  });
  stopFun = stop;
};
//禁止开始时间
const disabledDate1 = (time: Date) => {
  // 1是开始时间 2是结束时间
  return time.getTime() < Date.now();
  // console.log(time);

  //return false;
};
//时间筛选
// const seleceChnage = (v: any) => {
//   param.end_time = param.start_time + (v - 1) * 1000 * 3600 * 24;
// };
//已支付
const result = () => {
  getData();
  disabled.value = true;
  payShow.value = false;
  // console.log(param);
  router.push(`/index/order/detail?order_id=${order_id.value}&id=${route.query.id}`);
};
//修改
const Edit = () => {
  disabled.value = false;
  player();
};
//根据时间戳转年月日
const setDate = (value: number) => {
  let date = new Date(value);
  let y: any;
  let m: any;
  let d: any;
  y = date.getFullYear();
  m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let dates = y + "-" + m + "-" + d;

  return dates;
};
//父组件选择天数
const clickOptions = async (index: number) => {
  daysIndex.value = index;
  param.duty = responsibilityRef.value?.list as any;
  if (daysText.value == "3个月" || daysText.value == "6个月") {
    param.duty[1].data[0].disabled = true;
    param.duty[1].data[1].disabled = true;
    param.duty[1].data[2].disabled = false;
    param.duty[1].data[3].disabled = false;

    param.duty[1].money = 30;
    param.duty[1].price = "900";
  } else {
    param.duty[1].data[0].disabled = false;
    param.duty[1].data[1].disabled = false;
    param.duty[1].data[2].disabled = true;
    param.duty[1].data[3].disabled = true;
    param.duty[1].money = "装修10";
    param.duty[1].price = "338";
  }
  await getDays();
  param.treetop.end_date = setDate(param.end_time);
  start_date.value = setDate(param.start_time);

  param.end_time = param.start_time + (days.value - 1) * 1000 * 3600 * 24;
  end_date.value = setDate(param.end_time);
  // change();
  countCost();
};
//子组件选择方案时调用
const optionClick = (index: number) => {
  // console.log(daysIndex.value);

  //选择方案的下标
  fananIndex.value = index;
  console.log(fananIndex.value);
  countCost();
};
//获取职业类别数据
const getCategory = async () => {
  const res = await getJobClassify("");
  Info.data.categoryType = res.msg;
  // console.log(res);
};
//支付
const Pay = async (i: number) => {
  //见费1 非见费0
  url.value = "";
  const res = await submitApi({ id: order_id.value, is_pay: i });
  url.value = res.msg;
  if (res.code == 1) {
    getData();
    // payShow.value = true;
    window.open(url.value);
  } else {
    message.warning(res.msg);
  }

  //  window.open("/index/home", "_blank", "height=600,width=800");
};
//大地支付
const DDpay = async (i: number) => {
  //1是大地支付 2是广福支付3线下转账
  switch (i) {
    case 1:
      Pay(1);
      break;
    case 2:
      const res = await gfpay({ id: param.id });
      if (res.code == 1) {
        url.value = res.msg;
        payShow.value = true;
      } else {
        message.warning(res.msg);
      }
      break;
    case 3:
      ddxxPayInfo.dialogShow = true;
      break;
    default:
      break;
  }
};
//计算保费
const change = () => {
  // if (daysIndex.value == -1) return;
  // fananCost.value = Number(
  //   daysSelect.value[fananIndex.value][daysIndex.value].value
  // );

  countCost();
  // cost.value = fananCost.value + Number(param.add_price);
};

//获取页面数据
const getData = async () => {
  if (route.query.id && !order_id.value) {
    const res = await getInsureInfo({ id: route.query.id });
    Info.data = res.msg;
    param.start_time = Date.now() + 1000 * 60 * 60 * 24;
  } else {
    //详情页

    const res = await orderDetail({ id: order_id.value });
    Info.data = res.msg.bx_info;
    Info.data.duty = res.msg.duty;
    for (let i in param) {
      param[i] = res.msg[i];
    }
    if (route.query.is_copy == 1) {
      let dayNum = 0; //天数差值
      let start_time = param.start_time;
      param.start_time =
        new Date(new Date().toLocaleDateString()).getTime() + 1000 * 60 * 60 * 24;
      dayNum = param.start_time - start_time;
      param.end_time += dayNum;
    }
    param.is_copy = route.query.is_copy;
    start_date.value = setDate(param.start_time);
    end_date.value = setDate(param.end_time);
    if (param.is_copy == "1") {
      disabled.value = false;
    }
    // address.province = res.msg.treetop.province;
    days.value = Number(
      Math.floor(
        (param.end_time + 1000 * 3600 * 24 - param.start_time) / (1000 * 3600 * 24)
      )
    );

    daysSelect.value.forEach((it: any, index: number) => {
      if (it.label == days.value) {
        daysIndex.value = index;
      }
    });

    res.msg.duty[0].data.forEach((item: any, i: number) => {
      if (item.value == res.msg.duty[0].price) {
        fananIndex.value = i;
      }
    });

    cost.value = Number(res.msg.total_price);
    personCost.value = cost.value - Number(param.add_price);
    ddxxPayInfo.price = res.msg.total_price;
    ddxxPayInfo.id = res.msg.id;
  }
  xsDays();
  getCategory();
};
getData();
//判断闰年
//回显时间
const xsDays = () => {
  let d = (param.end_time - param.start_time) / 1000 / 3600 / 24;
  if (d > 0 && d <= 7) {
    daysText.value = "7天";
  } else if (d > 7 && d <= 31) {
    daysText.value = "1个月";
  } else if (d > 31 && d <= 94) {
    daysText.value = "3个月";
  } else if (d > 94 && d <= 186) {
    daysText.value = "6个月";
  } else {
    daysText.value = "1年";
  }
};
const inputChange = (v: any) => {
  if (v > 1000000) {
    message.warning("工程造价不能超过100万");
    return;
  }
  param.treetop.area_num = v;

  countCost();
};

//计算保费
const countCost = () => {
  //计算后的方案保费
  let f = Number(countFan());

  cost.value = f + Number(param.add_price);
  personCost.value = f;
};
//计算方案保费
const countFan = () => {
  //fananIndex 方案下标
  console.log(fananIndex.value);
  let fananText = fananIndex.value ? "100万" : "50万";
  let areaText = param.duty[2].money; //面积
  let gzPrice = param.duty[1].money; //工程造价

  // console.log(costArr.value[fananText][areaText][gzPrice][daysText.value].price);
  if (costArr.value[fananText][areaText][gzPrice][daysText.value].price) {
    return costArr.value[fananText][areaText][gzPrice][daysText.value].price;
  }
  return 0;

  return 0;
};
//获取天数
const getDays = async () => {
  let st = setDate(param.start_time);
  let p = {
    keywords: daysText.value,
    start_time: st,
  };
  const res = await getEndTime(p);
  days.value = res.msg.day;

  // daysSelect.value[daysSelect.value.length - 1].label = res.msg.keywords;
  // param.end_time = res.msg.end_time * 1000;
};
//时间
const pickerChange = (_: any, i: number) => {
  //i 1是开始时间 2是结束时间
  getDays();
  if (i == 1) {
    param.end_time =
      param.start_time - 1000 * 3600 * 24 + Number(days.value) * 1000 * 3600 * 24;
  }
  start_date.value = setDate(param.start_time);
  end_date.value = setDate(param.end_time);

  // price.value = 0;
  // Rate.value = costRate() as number;

  // responsibilityRef.value?.list.forEach((item: any) => {
  //   price.value += Number(item.price);
  // });
  // let add_price = responsibilityRef.value?.add_price as number;
  // cost.value = price.value * Rate.value + Number(param.add_price);
  countCost();
};

//获取子组件数据
const getChildrenData = () => {
  // console.log(categoryRef.value?.Info);

  let insured = baoItem2Ref.value?.list; //附加被投保人信息
  param.id = order_id.value;
  param.bx_id = route.query.id;
  param.insure = baoItem1Ref.value?.Info as any;
  // param.job_code = categoryRef.value?.Info.job_code as any;
  param.insured = insured as any;

  param.treetop = elementItemRef.value?.Info as any;
  param.duty = responsibilityRef.value?.list as any;
  param.annex = uploadRef.value?.uploadList as any;
  param.user = detailedListRef.value?.list as any;
  param.address = addressVueRef.value?.addInfo.address as any;
  // let addInfo = baoItem1Ref.value?.addInfo as addInfoType;
  // let key: keyof addInfoType;
  // for (key in addInfo) {
  //   param[key] = addInfo[key];
  // }
  // param.add_price = responsibilityRef.value?.add_price as any;
};
//打开报价书
const openBjsDia = () => {
  dialogBjsShow.value = true;
  getChildrenData();
};
const sublit = async (_: FormInstance | undefined, index: string) => {
  //baoItem1Ref.value?.Info 投保人
  getChildrenData();
  if (!param.treetop.province || !param.treetop.city || !param.treetop.area) {
    message.warning("标的要素地址未填写");
    return;
  }
  // if (param.treetop.name.length < 6) {
  //   message.warning("工程名称最少为六个汉字");
  //   return;
  // }
  // if (Number(param.treetop.price) > 300000) {
  //   message.warning("工程造价不能超过30万");
  //   return;
  // }
  param.is_show = index;
  // if (!e) return;
  // await e.validate((valid, err) => {
  //   if (valid) {
  //     console.log("submit!");
  //   } else {
  //     console.log(err);
  //   }
  // });
  if (stopFun) {
    stopFun();
  }
  const res = await addOrder(param);
  if (res.code == 1) {
    message.success("提交成功");
    router.push("/index/dd_jggzx/pay?order_id=" + res.msg + "&id=" + route.query.id);
    disabled.value = true;
    setTimeout(() => {
      getData();
    }, 0);
  } else {
    message.warning(res.msg);
  }

  // console.log(order_id.value, res.msg);

  // console.log(res);
};

const address = reactive<{
  province: string;
  city: string;
  area: string;
}>({
  province: "",
  city: "",
  area: "",
});
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//切换省份函数
const handleProvinceSelect = () => {
  address.city = "";
  address.area = "";
};
const getAddress = ({
  name,
}: {
  code: string[];
  name: string[];
  isComplete: boolean;
}) => {
  console.log(name);
};
// //切换城市函数
const handleCitySelect = () => {
  address.area = "";
};
//切换地区函数
const handleAreaSelect = () => {};
//二级城市列表
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province) {
    return [];
  }
  let temp = regionData.find((item: any) => {
    return item.value == address.province;
  });

  return temp!.children ? temp!.children : [];
});
const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province || !address.city) {
    return [];
  }
  if (cityList.value.length == 0) {
    return [];
  } else {
    let temp = cityList.value.find((item: any) => {
      return item.value == address.city;
    });
    if (temp) {
      return temp.children ? temp.children : [];
    } else {
      return [];
    }
  }
});

//倒计时
const countDown = () => {
  let t = setInterval(() => {
    dialogTime.value--;
    if (dialogTime.value <= 0) {
      clearInterval(t);
    }
  }, 1000);
};
countDown();

/** html转base64 */
const saveImage = () => {
  html2canvas(<HTMLElement>document.querySelector("#save"), {
    useCORS: true,
  }).then((canvas: any) => {
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, "下载图片");
  });
};
/** 下载图片 */
const downloadBase64 = (content: string, fileName: string) => {
  var base64ToBlob = function (code: any) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
      type: contentType,
    });
  };
  let aLink = document.createElement("a");
  let blob = base64ToBlob(content);
  aLink.download = fileName + ".png";
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};
//关闭弹窗须知
const closeXzDialog = () => {
  if (!checkedShow.value) return;
  dialogVisible.value = false;
};
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
  padding: 0 !important;
  margin: 0 !important;
}

:deep(.el-dialog__body) {
  margin: 0 !important;
  padding: 0 !important;
}

:deep(.el-input__inner) {
  color: black !important;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: black !important;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: black !important;
  -webkit-text-fill-color: black !important;
}
</style>
